<template>
  <div class="panel">
    <div class="tools">
      <img src="../../assets/images/left.png" class='left' alt="">
      <img src="../../assets/images/left_down.png" class='left-down' alt="">
      <img src="../../assets/images/right.png" class='right' alt="">
      <img src="../../assets/images/right_down.png" class='right-down' alt="">
      <div class="warp">
        <div v-for="item in list" style="line-height: 60px">
          <sapn style="float: left;margin-right: 5px">{{item.text}}:</sapn>
          <sapn style="float: left;margin-right: 10px">{{item.value}}</sapn>
        </div>
        <div class="btn-warp">
          <div class="search-btn" @click="search">查询
            <img src="../../assets/images/left.png" class='left' style="width: 8px;" alt="">
            <img src="../../assets/images/left_down.png" class='left-down' style="width: 8px;" alt="">
            <img src="../../assets/images/right.png" class='right' style="width: 8px;" alt="">
            <img src="../../assets/images/right_down.png" class='right-down' style="width: 8px;" alt="">
          </div>
          <div class="search-btn">清除</div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="18">
        <div class="maps" style="padding: 5px 0">
          <v-map style="height: 100%"></v-map>
          <div class='left'>
            <img src="../../assets/images/left.png" alt="">
          </div>
          <div class='left-down'>
            <img src="../../assets/images/left_down.png" alt="">
          </div>
          <div class='right'>
            <img src="../../assets/images/right.png" alt="">
          </div>
          <div class='right-down'>
            <img src="../../assets/images/right_down.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <summery></summery>
      </el-col>
    </el-row>
    <c-alert style="margin-top: 15px"></c-alert>
    <el-row>
      <el-col :span="12">
        <expressinfo style="margin-right:10px "></expressinfo>
      </el-col>
      <el-col :span="12">
        <expressinfo style="margin-left:10px "></expressinfo>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/javascript">
  import maps from './map.vue'
  import summery from './summery.vue'
  import cAlert from './alert.vue'
  import expressinfo from './expressinfo.vue'
  import bus from '@/eventBus/bus'

  export default {
    data() {
      return {
        list: [],
        options1: [{
          value: '河北',
          label: '河北'
        }],
        options2: [{
          value: '廊坊',
          label: '廊坊'
        }],
        value: ''
      }
    },
    mounted() {
      let _this = this
      bus.$on('search', function (e) {
        _this.list = []
        _this.$nextTick(() => {
          e.forEach((item) => {
            if (item.value) {
              _this.list.push(item)
            }
          })
        })
      })
    },
    methods: {
      search() {
        let obj = {
          status: true,
          type: 'searchMg'
        }
        bus.$emit('dialogshow', obj)
      }
    },
    components: {
      vMap: maps,
      summery: summery,
      cAlert,
      expressinfo
    }
  }
</script>
